<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./../../css/common.css">
    <script src="./../../js/tools.js"></script>
    <script src="./../../js/api_v1.js"></script>
    <script src="./../../js/enlarge.js"></script>
    <script src="./../../js/cookie.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .body-section {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .body-section .body-goods-con {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .body-section .body-goods-con {
            margin-top: 50px;
            margin-left: 50px;
            display: flex;
            flex-direction: column;
        }
        .body .container {
            width: 400px;
            height: 480px;
            position: relative;
            margin: 50px 50px;
        }
        .container .show img {
            width: 400px;
            height: 400px;
            display: block;
        }
        .container .mask{
            position: absolute;
            display: none;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0, 0.3);
        }
        .container .nav{
            display: flex;
        }
        .container .nav li {
            list-style: none;
            padding: 3px;
            box-sizing: border-box;
        }
        .container .nav li img {
            width: 74px ;
            height: 74px ;
        }
        .container .nav .active {
            border: 1px solid red;
        }
        .container .enlarge {
            position: absolute;
            display: none;
            top: 0px;
            left: 450px;
            width: 400px;
            height: 400px;
            background-position: 0px 0px;
            background-image: url(./images/1.jpg);
            background-size: 800px 800px;
        }
    </style>
</head>
<body>
    <div class="head-container">
        <div class="header">
            <section class="head-sec1">
                <div class="content">
                    <ul>
                        <li><a href="">我的顺电</a></li>
                        <span></span>
                        <li><a href="">家电医院</a></li>
                        <span></span>
                        <li><a href="">为您服务</a></li>
                        <span></span>
                        <li><a href="">更多精选</a></li>
                        <span></span>
                        <li><a href="">手机顺电</a></li>
                        <span></span>
                        <li><a href="">商家入驻</a></li>
                    </ul>
                </div>
            </section>
            <section class="head-sec2">
                <div class="content">
                    <div class="floatl">
                        <img src="./../../images/logo.png" alt="">
                    </div>
                    <div class="center">
                        <input type="text"><button>搜索</button>
                    </div>
                    <div class="floatr">
                        <section class="register"></section>
                        <section class="login45"></section>
                        <section class="shopcar"></section>
                    </div>
                </div>
            </section>
            <section class="head-sec3">
                <div class="content">
                    <p>所有商品分类<i><img src="" alt=""></i></p>
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">Apple授权专营店</a></li>
                        <li><a href="">戴森专区</a></li>
                        <li><a href="">尚睿专区</a></li>
                        <li><a href="">新品</a></li>
                        <li><a href="">手机专区</a></li>
                        <li><a href="">每周特惠</a></li>
                        <li><a href="">样品出清</a></li>
                        <li><a href="">企业购</a></li>
                        <li><a href="">顺电APP</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <div class="body content body-section">
        <section class="body-enlarge-con">
            <div class="container">
                <div class="show">
                    <div class="mask"></div>
                    <img src="" alt="">
                </div>
                <ul class="nav">
                </ul>
                <div class="enlarge">
                    
                </div>
            </div>
        </section>
        <section class="body-goods-con">
            <h2 class="pname">商品名:</h2>
            <p class="pprice">商品价格:</p>
            <p class="pdiscount">折扣价:</p>
            <p class="pinventory">库存:</p>
            <div>
                <span class="body-goods-reduce">-</span><input class="count" type="text" value="1"><span class="body-goods-add">+</span>
            </div>
            <div>
                <button class="body-goods-cart">加入购物车</button><button class="Goshop">我的购物车</button>
            </div>
        </section>
    </div>
    <div class="footer-container">
        
<div class="foot">
    <section class="foot-sec1">
        <div class="content">
            <ul class="foot-nav">
                <li><img src="./images/zp.png" alt=""><span>正品保证</span></li>
                <li><img src="./images/vip_footer.png" alt=""><span>会员尊享</span></li>
                <li><img src="./images/bao.png" alt=""><span>全国联保</span></li>
                <li><img src="./images/30.png" alt=""><span>30天退货</span></li>
                <li><img src="./images/Awesome-Projects.png" alt=""><span>正规发票</span></li>
            </ul>
        </div>
    </section>
    <div class="content">
        <section class="foot-sec2">
            <div>
                <p>商城客服热线</p>
                <section>
                    <div>
                        <i><img src="./images/time_footer.png" alt=""></i><span>商城服务时间: 09:00 - 18:00</span>
                    </div>
                    <div>
                        <i><img src="./images/mobile_footer.png" alt=""></i><span>400-8899-618</span>
                    </div>
                </section>
            </div>
            <div>
                <p>企业购热线</p>
                <section>
                    <div>
                        <i><img src="./images/time_footer.png" alt=""></i><span>企业购热线时间: 09:00 - 18:00</span>
                    </div>
                    <div>
                        <i><img src="./images/mobile_footer.png" alt=""></i><span>0755-83286903</span>
                    </div>
                </section>
            </div>
            <div>
                <p>售后服务热线</p>
                <section>
                    <div>
                        <i><img src="./images/time_footer.png" alt=""></i><span>售后热线时间: 09:00 - 22:00</span>
                    </div>
                    <div>
                        <i><img src="./images/mobile_footer.png" alt=""></i><span>400-6788-688</span>
                    </div>
                </section>
            </div>
            <div>
                <p>在线客服热线</p>
                <section>
                    <div>
                        <i><img src="./images/time_footer.png" alt=""></i><span>服务时间: 09:00 - 23:00</span>
                    </div>
                    <div>
                        <i><img src="./images/kefu_footer.png" alt=""></i><span><a href="">在线客服</a><a href="">及时答疑</a></span>
                    </div>
                </section>
            </div>
        </section>
        <section class="foot-sec3">
            <div class="foot-sec3-main">
                <ul>
                    <p>新手指引</p>
                    <li><a href="">交易须知</a></li>
                    <li><a href="">开具发票</a></li>
                    <li><a href="">联系客服</a></li>
                    <li><a href="">会员登录小贴士</a></li>
                </ul>
                <ul>
                    <!-- <p></p> -->
                    <li><a href="">支付及配送</a></li>
                    <li><a href="">在线支付</a></li>
                    <li><a href="">汇款转账</a></li>
                    <li><a href="">运费政策</a></li>
                    <li><a href="">配送方式</a></li>
                </ul>
                <ul>
                    <!-- <p></p> -->
                    <li><a href="">订单及售后</a></li>
                    <li><a href="">订单说明</a></li>
                    <li><a href="">退款说明</a></li>
                    <li><a href="">售后政策</a></li>
                    <li><a href="">售后申请</a></li>
                </ul>
                <ul>
                    <!-- <p></p> -->
                    <li><a href="">关于顺电</a></li>
                    <li><a href="">品牌故事</a></li>
                    <li><a href="">投资者关系</a></li>
                    <li><a href="">联系方式</a></li>
                    <li><a href="">网站合作</a></li>
                </ul>
            </div>
            <div class="foot-sec3-aside">
                <p>门店体验店</p>
                <p>深圳市顺电连锁股份有限公司，是一家专门销售家用电器(包括手机、电脑、数码相机)的零售商。顺电美宜佳门店有以下特点:高品质商品、丰富选择、专业服务。</p>
                <div>
                    <ul>
                        <li><a href="">北京</a></li>
                        <li><a href="">上海</a></li>
                        <li><a href="">深圳</a></li>
                    </ul>
                    <ul>
                        <li><a href="">广州</a></li>
                        <li><a href="">苏州</a></li>
                        <li><a href="">更多</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="foot-sec4">
            <div>
                <section>
                    <p>
                        <span>粤ICP备13052236</span><i>|</i>营业执照
                    </p>
                    <p>Copyright 2002-2021.深圳市顺电脑连锁股份有限公司 版权所有</p>
                </section>
                <section>
                    <ul>
                        <li><a href=""><i><img src="./../../images/police.png" alt=""></i><span>网上报警</span></a></li>
                        <span></span>
                        <li><a href=""><i><img src="./../../images/gaju.png" alt=""></i><span>深圳市公安局</span></a></li>
                        <span></span>
                        <li><a href=""><i><img src="./../../images/gongshang.png" alt=""></i><span>工商监管</span></a></li>
                        <span></span>
                        <li class="weibo"><a href="javascript:;"><i><img src="./../../images/xinlangweibo.png" alt=""></i><span>关注微博</span></a></li>
                        <span></span>
                        <li class="weibo"><a href="javascript:;"><i><img src="./../../images/weixin_footer.png" alt=""></i><span>顺电购物</span></a></li>
                        <span></span>
                        <li><a href=""><i><img src="./../../images/audit_logo.png" alt=""></i><span>顺电举报网</span></a></li>
                    </ul>
                </section>
            </div>
        </section>
    </div>
</div>
    </div>
</body>
<script>
    let uid = getCookie("id");
    if( !uid ){
        window.location.href = "./../../login.html" ;
    }
    window.onload = async function (){
        let res = await getDetail({opt:'getProDetail',pid:getKeyValue("pid")});
        console.log(res);
        let imgArr = ["./../../uploads/"+res['img']] ; //申明一个数组存放图片
        let containerEle = document.querySelector(".body .container");        //获取容器盒子元素
        new Enlarge(containerEle,imgArr);       //new一个Enlarge类的对象
        $(".body-goods-con .pname").innerHTML += res['pname'] ;
        $(".body-goods-con .pprice").innerHTML += "￥"+res['price'] ;
        $(".body-goods-con .pdiscount").innerHTML += "￥" + ( res['price'] * res['discount'] / 10 ) ;
        $(".body-goods-con .pinventory").innerHTML += res['inventory'] ;
        $(".body-goods-con .body-goods-reduce").onclick = function (){
            let count = parseInt($(".count").value) ;
            if( count > 1 ) {
                count -- ; 
            } 
            $(".count").value = count ; 
        }
        $(".body-goods-con .body-goods-add").onclick = function (){
            let count = parseInt($(".count").value) ;
            count ++ ; 
            $(".count").value = count ; 
        }
        $(".body-goods-cart").onclick = async function (){
            let count = parseInt($(".count").value) ;
            let res = await getDetail({opt:'addCart',uid,pid:getKeyValue("pid"),pnum:count})
            console.log(res);
        }
        $(".body-goods-con .Goshop").onclick = function (){
            window.location.href = "./demo1.html" ;
        }
    }
    
    function getKeyValue(key){
        let str = window.location.search ;
        let arr = str.substr(1,str.length).split("&");
        let newArr = [] ; 
        arr.forEach(item=>{
            let obj = {} ; 
            obj[item.split("=")[0]] = item.split("=")[1] ; 
            newArr.push(obj);
        });
        let  flag = '' ;
        newArr.forEach(item=>{
            if(typeof item[key] !== 'undefined' ){
                flag =  item[key] ; 
            }
        });
        return flag ; 
    }
</script>
</html>